<template>
  <div style="margin-left: 10px;">
    <div class="the-title">
      <span>未来一天的设备状态</span>
    </div>
    <!-- <div ref="main" style="width: 100%;min-height: 300px; background-color: rgb(28, 93, 219);"></div> -->
    <div style="background-color: rgb(28, 93, 219);overflow:scroll;max-height: 300px;">
      <div v-for="item in 10">
        <div style="height: 30px;padding: 5px;display: flex;align-items: center;">
          <span style="margin-right: 30px;width: 50px;font-size: 13px;">冷却器</span>
          <div style="height: 20px;border: 1px solid #FFFFFF;display: flex;flex: 1;border-radius: 5px;">
            <div style="height: 100%;border-right: 1px solid #FFFFFF;font-size: 13px;text-align: center;line-height: 20px;" v-for="(item,index) in list" :style="{width: item+'%',backgroundColor:colorList[index] }">{{item}}%</div>
          </div>
          <span style="margin-left: 5px;display: block;font-size: 12px;">100%</span>
        </div>
        <div class="Descript-title">
          <span>几乎完全失效</span>
          <span>正常</span>
          <span>严重邂逅</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        colorList:[
          '#67C23A',
          '#E6A23C',
          '#F56C6C',
          '#409EFF'
        ],
        list:[15,20,30,5,30]
      }
    }
    // mounted() {
    //   let myChart = this.$echarts.init(this.$refs.main);
    //    var option = {
    //     tooltip : {
    //         trigger: 'axis',
    //         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    //             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    //         },
    //         formatter: function (params) {       //浮动框自定义格式
    //             var tmp = params[0].name + "<br>";
    //             for(var i = 0;i<params.length;i++){
    //                 tmp += params[i].seriesName + ":" + params[i].value + "%<br>";
    //             }
    //             return tmp;
    //         }
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '0px',
    //         bottom: '0%',
    //         top:'15px',
    //         containLabel: true
    //     },
    //     calculable : true,
    //     xAxis : [
    //         {
    //             type : 'value',
    //             show: false,
    //             splitLine:{
    //                show:false
    //             },
    //             axisTick:{
    //               show:false
    //             }
    //         }
    //     ],
    //     yAxis : [
    //       {
    //           type : 'category',
    //           data : ['阀门'],
    //           axisLine: {
    //             lineStyle: {
    //               color: "#FFFFFF"
    //             }
    //           }
    //         },
    //     ],
    //     series : [
    //         {
    //             name:'直接访问',
    //             type:'bar',
    //             stack: '总量',
    //             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
    //             data:[320],
    //             label: {
    //                 normal: {
    //                     show: true,
    //                     position: 'inside',
    //                     formatter: '{c}%'      //数值显示百分比
    //                 }
    //             }
    //         },
    //         {
    //             name:'邮件营销',
    //             type:'bar',
    //             stack: '总量',
    //             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
    //             data:[120],
    //             label: {
    //                 normal: {
    //                     show: true,
    //                     position: 'inside',
    //                     formatter: '{c}%'
    //                 }
    //             }
    //         },
    //         {
    //             name:'联盟广告',
    //             type:'bar',
    //             stack: '总量',
    //             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
    //             data:[220],
    //             label: {
    //                 normal: {
    //                     show: true,
    //                     position: 'inside',
    //                     formatter: '{c}%'
    //                 }
    //             }
    //         },
    //         {
    //             name:'视频广告',
    //             type:'bar',
    //             stack: '总量',
    //             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
    //             data:[150],
    //             label: {
    //                 normal: {
    //                     show: true,
    //                     position: 'inside',
    //                     formatter: '{c}%'
    //                 }
    //             }
    //         },
    //         {
    //             name:'搜索引擎',
    //             type:'bar',
    //             stack: '总量',
    //             itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
    //             data:[820],
    //             label: {
    //                 normal: {
    //                     show: true,
    //                     position: 'inside',
    //                     formatter: '{c}%'
    //                 }
    //             }
    //         }
    //     ]
    // };
    //   myChart.setOption(option);
    // }
  }
</script>

<style scoped="scoped">
  .the-title{
    margin: 10px 0;
  }
  .the-title span:nth-child(1){
    color: rgb(26, 187, 229);
  }
  .Descript-title{
    font-size: 12px;
    display: flex;
    padding-left: 50px;
    border-bottom: 1px dotted #FFFFFF;
  }
  .Descript-title span{
    display: block;
    margin-right: 10px;
    padding: 0 0 5px 0;
  }
</style>
